/*----------------------------------------*/
/*  03. Download Area CSS
/*----------------------------------------*/

.download-area.section{
    position: relative;
	top: -80px;
    //Responsive
    @media #{$desktop-device}{
        top: -70px;
    }
    @media #{$tablet-device}{
        top: -40px;
    }
    @media #{$large-mobile}{
        top: -55px;
    }
    .download-demo-content{
        display: flex;
        align-items: center;
        position: relative;
        justify-content: space-around;
        z-index: 999;
        //Responsive
        @media #{$large-mobile}{
            flex-wrap: wrap;
        }
        & h3{
        font-size: 40px;
        line-height: 45px;
        margin-bottom: 0;
        //Responsive
        @media #{$desktop-device}{
            font-size: 30px;
        }
        @media #{$large-mobile}{
            font-size: 24px;
            line-height: 34px;
        }
        @media #{$extra-small-mobile}{
            font-size: 24px;
            line-height: 34px;
        }
        & span{
            color: $theme-color;
        }
    }
        & ul{
            //Responsive
            @media #{$large-mobile}{
                margin-top: 30px;
            }
            & li{
                margin-bottom: 40px;
                //Responsive
                @media #{$desktop-device}{
                    margin-bottom: 30px;
                }
                @media #{$tablet-device}{
                    margin-bottom: 30px;
                }
                @media #{$large-mobile}{
                    margin-bottom: 15px;
                }
                &:nth-child(2){
                    margin-left: 30px;
                }
                &:nth-child(3){
                    margin-left: 120px;
                }
                &:last-child{
                    margin-bottom: 0;
                }
                & a{
                    font-size: 36px;
                    line-height: 45px;
                    position: relative;
                    display: inline-block;
                    font-family: $heading-font;
                    //Responsive
                    @media #{$large-mobile}{
                        font-size: 18px;
                        line-height: 28px;
                    }
                    &::before{
                        content: "";
                        position: absolute;
                        top: 0;
                        width: 100%;
                        height: 2px;
                        background-color: #b4bbe4;
                        z-index: 99;
                    }
                    &::after{
                        content: "";
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        width: 100%;
                        height: 2px;
                        background-color: #b4bbe4;
                        z-index: 99;
                    }
                    &:hover{
                        &::before{
                            animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite;
                        }
                        &::after{
                            animation: shake-horizontal2 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite;
                        }
                    }
                }
            }
        }
}  
}

/**
 * ----------------------------------------
 * animation shake-horizontal
 * ----------------------------------------
 */
@keyframes shake-horizontal {
  0%,
  100% {
    left: 0;
  }

  50% {
    left: 30px;
  }
}


@keyframes shake-horizontal2 {
  0%,
  100% {
    right: 0;
  }

  50% {
    right: 30px;
  }
}


